import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, 
  ScrollView,ImageBackground,StatusBar,
  TouchableOpacity,Modal
} from 'react-native';
import Video from 'react-native-video';
import MusicScan from '../../component/MusicScan'
import { TipModal } from '../../component/Tips';
import Toast, {DURATION} from 'react-native-easy-toast'
import BackButton from '../../component/BackButton';
import MyButton from '../../component/MyButton';
import ShareView from '../../component/ShareView';
import DeviceStorage from '../../common/DeviceStorage';
//import VideoPlayerComp from '../../component/VideoPlayerComp';
import {jumpPage,width} from '../../common/common';
import {BASEURL} from '../../api/api'
var IMG_URL =  BASEURL+'image/showImage?imageName=';
export default class TempScan extends Component{
  static navigationOptions = ({ navigation }) =>{
    return{
      title:navigation.getParam('tempTitle'),
      headerRight:(<View></View>),
      headerLeft:<BackButton navigation = {navigation}/>
    }
  };
  constructor(props){
    super(props);
    this.state = ({
      detail: {

      },
      modal: false,
      tempId: this.props.navigation.getParam('tempId'),
    })
    //console.log('navig',this.props.navigation)
  }
  componentDidMount(){
    this._getDetailInfo();
  }
  _getDetailInfo(){
    this.refs.tipModal._loading();
    fetch(BASEURL+'temp/tempUserDetail?tempId='+this.state.tempId)
    .then(res=>res.json())
    .then(response=>{
			//console.log(response);
			// /alert(JSON.stringify(response));
      this.refs.tipModal._close();
      if(response.succ == '1'){
				response.tempUser.img = {uri: IMG_URL+response.tempUser.tempImg}
        this.setState({
          detail: response.tempUser,
          tempId: response.tempUser.tempId
        })
      } else {
        this.refs.toast.show("获取失败");
      }
      
    })
    .catch(err=>{
			//alert(JSON.stringify(err))
      this.refs.tipModal._close();
      this.refs.tipModal._error('获取失败',1500);
    })
  }
  _player(){
    // MusicScan.openPicker({
    //   width: 300,
    //   height: 400,
    //   cropping: false
    // });
		//MusicScan.show("Awesome", MusicScan.SHORT);
		let img = this.state.detail.tempImg;
    // /alert(img);
    if(img && img.indexOf('http') == -1){
      img = IMG_URL + img;
    }
		let {detail} = this.state;
		if(detail.mp4){
			jumpPage(this.props.navigation, 'playerVideo',{videoUrl:detail.mp4,thumbnail:img});
		} else {
			this.refs.toast.show("暂无视频");
		}
    
    
  }

  render(){
    //require('../../images/temp/group0.png')
    let img = this.state.detail.tempImg;
    // /alert(img);
    if(img && img.indexOf('http') == -1){
      img = IMG_URL + img;
    }
    return(
      <View style={styles.container}>
				<StatusBar hidden={false}/>
        <ImageBackground style={styles.mainImg} source={{uri:img}}>
          <TouchableOpacity style={styles.playView} onPress={()=>{this._player()}}>
            <Image style={styles.palyIcon} source={require('../../images/temp/icon_play.png')}/>
          </TouchableOpacity>
        </ImageBackground>
        <Text style={styles.contentText}>{this.state.detail.tempDesc}</Text>
        <View style={{flex:1,marginTop:10,borderWidth:0,borderColor:'red',backgroundColor:'#f0f0f0'}}>
          <ShareView item={this.state.detail} hasClose={false} toast={this.refs.toast}/>
          <View style={{flex:1}}></View>
          {/* <View>
            <Image style={{width:width,height:width*0.2}} source={require('../../images/temp/icon_ad.png')}/>
          </View> */}
        </View>
        {/* <MyButton btnStyle={{marginTop:0,marginLeft:20,marginRight:20,marginBottom:10,height:40}} text='使用' press={()=>this._goEdit()}/> */}
        <Toast ref="toast" position='bottom' positionValue={200} />
        <TipModal ref="tipModal"/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  row:{
    flexDirection:'row',
    alignItems:'center',
    borderBottomWidth:1,
    borderBottomColor:'#ccc',
    paddingTop:10,
    paddingBottom:10,
  },
  contentText:{
    marginLeft:10,
    fontSize:16,
    color:'#333',
  },
  playView:{
    backgroundColor:'rgba(0,0,0,0.4)',
    borderRadius:20,
    width:40,
    height:40,
    justifyContent:'center',
    alignItems:'center',
  },
  palyIcon:{
    left:1,
    width:30,
    height:30,
  },
  mainImg:{
    margin:10,
    width:width-20,
    height:(width-20)*0.6,
    justifyContent:'center',
    alignItems:'center',
  },
  container: {
    backgroundColor:'#fff',
    flex: 1,
  },
})